import React from 'react';
import { IFormItem, Itype } from '@/base-ui/form';
import { Popconfirm, Space, Dropdown, Menu, Button } from 'antd';
import { ISearchSelector, IToolButton } from '@/base-ui/tool-bar';
// import { ColumnProps } from 'antd/es/table'

const randomId = () => String(Math.random()).slice(2);

const menu = (
  <Menu
    items={[
      {
        key: 0,
        label: <span>详情</span>
      },
      {
        key: 1,
        label: <span>复制</span>
      },
      {
        key: 2,
        label: (
          <Button
            onClick={function () {
              window.print();
            }}
          >
            打印
          </Button>
        )
      }
    ]}
  />
);
/* 搜索区域 */
export const PageSearchConfig: IFormItem[] = [
  {
    type: 'input' as Itype,
    label: '姓名',
    placeholder: '请输入仓库姓名'
  },
  {
    type: 'input' as Itype,
    label: '职位',
    placeholder: '请输入职位'
  },
  {
    type: 'input' as Itype,
    label: '值班起始',
    placeholder: '请输入值班起始'
  },
  {
    type: 'input' as Itype,
    label: '值班结束时间',
    placeholder: '请输入值班工作内容'
  }
  // {
  //   type: 'password' as Itype,
  //   label: '密码',
  //   placeholder: '请输入密码'
  // },S
];

/* 工具栏区域 */

// 选择器配置
export const SearchSelector: ISearchSelector = {
  Options: [
    { label: '姓名', value: '1' },
    { label: '职位', value: '2' },
    { label: '值班起始时间', value: '3' }
  ],
  defaultValue: '1'
};
// 按钮组
export const buttonGroup: IToolButton[] = [
  { type: 'create', text: '新增记录', isShow: true, onClick: () => {} },
  { type: 'delete', text: '批量删除', isShow: true, onClick: () => {} },
  { type: 'import', text: '导入', isShow: true, onClick: () => {} },
  { type: 'export', text: '导出', isShow: true, onClick: () => {} }
];

/* 表格区域 */

// 表格数据
export const FormDataSource: any = [
  {
    key: '0',
    orderId: randomId(),
    name: '张三',
    position: '经理',
    onDutyTime: '2022-7-30 9:00 ',
    offDutyTime: '2022-7-30 21:00'
  },
  {
    key: '1',
    orderId: randomId(),
    name: '李三',
    position: '厂长',
    onDutyTime: '2022-7-30 9:00 ',
    offDutyTime: '2022-7-30 21:00'
  },
  {
    key: '2',
    orderId: randomId(),
    name: '王五',
    position: '仓库管理员',
    onDutyTime: '2022-7-30 9:00 ',
    offDutyTime: '2022-7-30 21:00'
  },
  {
    key: '3',
    orderId: randomId(),
    name: '赵六',
    position: '养殖人员',
    onDutyTime: '2022-7-30 9:00 ',
    offDutyTime: '2022-7-30 21:00'
  },
  {
    key: '4',
    orderId: randomId(),
    name: '詹姆斯',
    position: '信息操作员',
    onDutyTime: '2022-7-30 9:00 ',
    offDutyTime: '2022-7-30 21:00'
  }
];
// 表格列配置
// type columnType = {
//   title: string
//   dataIndex: string
//   key: string
// }

// export const FormColumns: ColumnProps<columnType>[] = [
export const FormColumns: any = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    width: 150
  },
  {
    title: '职位',
    dataIndex: 'position',
    key: 'position',
    width: 150
  },
  {
    title: '值班起始时间',
    dataIndex: 'onDutyTime',
    key: 'onDutyTime',
    width: 150
  },
  {
    title: '值班结束时间',
    dataIndex: 'offDutyTime',
    key: 'offDutyTime',
    width: 150
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    width: 150,
    render: (_: any, record: { key: React.Key }) => (
      <Space>
        <a>编辑</a>
        <Popconfirm
          title="确定删除?"
          okText="确认"
          cancelText="取消"
          // cancelButtonProps={{ size: 'middle' }}
          onConfirm={() => {}}
        >
          <a style={{ color: '#ff4d4f' }}>删除</a>
        </Popconfirm>
        <Dropdown overlay={menu}>
          <a onClick={(e) => e.preventDefault()}>···</a>
        </Dropdown>
      </Space>
    ),
    fixed: 'right'
  }
];
//复选框的接口
export interface DataType {
  key: React.Key;
  id: string;
  name: string;
  age: number;
  address: string;
}
